import {
  Button,
  Col,
  Form,
  FormItem,
  Image,
  InputNumber,
  message,
  Modal,
  Row,
  Space,
  Spin,
  Step,
  Steps
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { cinemaApi, jindouGiftApi } from '@/apis'
import { JindouLifeExpressInfo, JindouOrderDetail } from '@/apis/jindouLifeTyps'
import { ProTable, ProTableProps, ProTableRef } from '@/components'
import { TABLE_FORMAT } from '@/constants'
import { formatDate, optionsToMap } from '@/utils'
import { handlePrice } from '@/utils/bsshow'

import { JindouGiftOrderStatusOptions } from '../constants'

export default defineComponent({
  name: 'JdgOrderDetail',
  setup() {
    const route = useRoute()
    const loading = ref(false)

    const showExpressDlg = ref(false)
    const showRefundDlg = ref(false)
    const refundDlgLoading = ref(false)
    const orderDetail = ref({} as JindouOrderDetail)
    const expressInfo = ref({} as JindouLifeExpressInfo)
    const refundData = ref({} as any)
    const tableConfig = ref({
      fixedHeight: false,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '商品图片',
            width: 100,
            slots: {
              default: 'image'
            }
          },
          {
            title: '商品名称',
            field: 'productName'
          },
          {
            title: '商品规格',
            field: 'specName'
          },
          {
            title: '售价',
            slots: {
              default: 'salePrice'
            }
          },
          {
            title: '数量',
            field: 'amount'
          },
          {
            title: '商品状态',
            field: 'status',
            formatter: ({ cellValue }) => {
              return optionsToMap(JindouGiftOrderStatusOptions)[cellValue]
            }
          },
          {
            title: '发货时间',
            field: 'sendTime',
            minWidth: 200,
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 150
          }
        ]
      }
    } as ProTableProps)

    onMounted(() => {
      getOrderDetail()
    })

    async function getOrderDetail() {
      try {
        orderDetail.value = await jindouGiftApi.getOrderDetail(
          route.query.orderNo
        )
        if (orderDetail.value.status == 2 || orderDetail.value.status == 3) {
          expressInfo.value = await jindouGiftApi.getExpressDetail(
            route.query.orderNo
          )
        }
      } finally {
      }
    }

    //售后
    async function afterSalesConfirm() {
      if (!refundData.value.amount) {
        message.error('请输入退款数量')
        return
      }
      try {
        refundDlgLoading.value = true
        await jindouGiftApi.afterSales(
          route.query.orderNo,
          refundData.value.amount
        )
        showRefundDlg.value = false
        message.success('操作完成')
        getOrderDetail()
      } finally {
        refundDlgLoading.value = false
      }
    }

    return {
      tableConfig,
      loading,
      showExpressDlg,
      orderDetail,
      expressInfo,
      refundData,
      showRefundDlg,
      refundDlgLoading,
      afterSalesConfirm
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <ProTable
            data={[this.orderDetail]}
            ref="tableRef"
            v-slots={{
              image: ({ row }) => <Image src={row.img}></Image>,
              salePrice: ({ row }) => {
                return <Space>{handlePrice(row.salePrice, row.saleGold)}</Space>
              },
              operation: ({ row }) => (
                <Space>
                  <Button
                    v-show={row.isAfterSale}
                    type="link"
                    size="small"
                    onClick={() => {
                      this.showRefundDlg = true
                    }}
                  >
                    售后
                  </Button>
                  <Button
                    v-show={row.status == 2 || row.status == 3}
                    type="link"
                    size="small"
                    onClick={() => {
                      this.showExpressDlg = true
                    }}
                  >
                    查看物流
                  </Button>
                </Space>
              )
            }}
            {...this.tableConfig}
          />
          <h3 style={{ marginLeft: '10px', marginTop: '30px' }}>
            订单金额明细（元）
          </h3>
          <Row type="flex" style={{ marginTop: '20px', marginLeft: '30px' }}>
            <Col span={5}>
              <FormItem label="商品总额">
                {this.orderDetail.goodsPrice}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="配送费用">
                {this.orderDetail.transitFee}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="订单总额">
                {this.orderDetail.totalPrice}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="金豆支付">{this.orderDetail.payGold}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="实付总额">
                {handlePrice(
                  this.orderDetail.payPrice,
                  this.orderDetail.payGold
                )}
              </FormItem>
            </Col>
          </Row>

          <h3 style={{ marginLeft: '10px', marginTop: '30px' }}>下单信息</h3>
          <Row type="flex" style={{ marginTop: '20px', marginLeft: '30px' }}>
            <Col span={5}>
              <FormItem label="购买人姓名">
                {this.orderDetail.wxNickName}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="手机号">{this.orderDetail.phone}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="订单状态">
                {
                  optionsToMap(JindouGiftOrderStatusOptions)[
                    this.orderDetail.status
                  ]
                }
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="支付方式">
                {this.orderDetail.payType == 0 ? '微信' : '其他'}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="支付时间">
                {this.orderDetail.payTime
                  ? formatDate(new Date(parseInt(this.orderDetail.payTime)))
                  : ''}
              </FormItem>
            </Col>
            <Col span={10}>
              <FormItem label="支付平台交易流水号">
                {this.orderDetail.wxTransactionId}
              </FormItem>
            </Col>
          </Row>

          <h3 style={{ marginLeft: '10px', marginTop: '30px' }}>收货人信息</h3>
          <Row type="flex" style={{ marginTop: '20px', marginLeft: '30px' }}>
            <Col span={5}>
              <FormItem label="收货人姓名">
                {this.orderDetail.receiverName}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="手机号">
                {this.orderDetail.receiverMobile}
              </FormItem>
            </Col>
            <Col span={10}>
              <FormItem label="地址">{this.orderDetail.address}</FormItem>
            </Col>
          </Row>
        </Form>
        <Modal
          v-model:visible={this.showExpressDlg}
          title="物流信息"
          width={700}
          footer={null}
        >
          <Form>
            <FormItem label="物流公司">{this.expressInfo.expressName}</FormItem>
            <FormItem label="物流单号">{this.expressInfo.logisticNo}</FormItem>
            <FormItem>
              <Steps direction="vertical" current={50}>
                {this.expressInfo.traces?.map(item => {
                  return (
                    <Step
                      title={item.acceptTime}
                      description={item.acceptStation}
                    />
                  )
                })}
              </Steps>
            </FormItem>
          </Form>
        </Modal>
        <Modal
          v-model:visible={this.showRefundDlg}
          confirmLoading={this.refundDlgLoading}
          title="售后"
          width={500}
          destroyOnClose
          onOk={this.afterSalesConfirm}
        >
          <Form>
            <FormItem label={'退款数量'} required>
              <InputNumber
                v-model:value={this.refundData.amount}
                placeholder="请输入"
                min={0}
                max={this.orderDetail.amount}
                style={{ width: '300px' }}
              />
            </FormItem>
          </Form>
        </Modal>
      </Spin>
    )
  }
})
